<template>
  <div class="chongzhijiangli">
    <div class="rechange-container">
      <div class="detail-page" v-if="module.modules[0] && module.modules[0].pic">
        <img
          class="detail-page-img"
          style="height: 120px"
          :src="fileBaseUrl + module.modules[0].pic"
        />
      </div>

      <div class="rechange-hd flex-x-between-center">
        <div class="rechange-money">单次充值 5元得奖励</div>
        <div style="display: flex; align-items: center">
          <div class="my-text">我的钱包</div>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>

      <el-carousel class="flex-x" :autoplay="false" indicator-position="none">
        <div class="card-award-div">
          <div v-for="item in 3" :key="item" style="width:339px">
            <el-carousel-item style="height: initial" class="swiper-my">
              <div
                style="width:339px"
                class="card-award-item"
              >
                <div class="hd flex-x-center">
                  <div class="card-name">{{ item }}卡专属</div>
                  <div class="line"></div>
                </div>
                <div class="open-card-gift flexCS">
                  <div
                    :key="item+ '-' + sitem"
                    class="open-card-gift-item colCA"
                    v-for="sitem in item"
                  >
                    <div>
                      <img
                        style="width: 28px; height:28px"
                        :src="require('@/assets/icon/help.png')"
                        class="gift-icon"
                      >
                    </div>
                    <div class="circle"></div>
                    <div
                      class="_h2"
                      style="color:#fff;background:#ffb72f;"
                    >
                      小程序查看
                    </div>
                    <div class="_h3" >小程序查看</div>
                  </div>
                </div>
                <div
                  class="flex-x-center-center openCardBtn"
                  style="color:#fff;background:#ffb72f;"
                >
                  立即充值领取奖励
                </div>
              </div>
            </el-carousel-item>
          </div>
        </div>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    module: {
      type: Object,
    },
    fileBaseUrl: {
      type: String,
    },
  },
  watch: {
    'module.modules': {
      handler() {
        this.$forceUpdate()
      },
      deep: true,
      immediate: true
    }
  },
};
</script>

<style lang="scss" scoped>
.rechange-container {
  padding: 0px 10px 15px 10px;
  overflow: hidden;
  /deep/.el-carousel__container {
    height: 265px !important;
  }
}
.detail-page {
  // overflow: hidden;
  .detail-page-img {
    border-radius: 10px;
  }
  margin-bottom: 16px;
}
.rechange-hd {
  font-family: PingFang SC;
  font-weight: 400;
  margin-bottom: 19px;
  .rechange-money {
    font-size: 16px;
    color: #000000;
  }
  .my-text {
    font-size: 14px;
    color: #888888;
  }
}
.card-award-div {
  /* background: #f8f8f8; */
  overflow: hidden;

  border-radius: 10px;
  height: 250px;
  .card-award-item {
    padding-bottom: 26px;
    padding-top: 25px;
    width: 300px;
    background: #f8f8f8;
    border-radius: 10px;
    margin-bottom: 25px;
  }
  .hd {
    position: relative;
    margin-bottom: 18px;
    .line {
      position: absolute;
      z-index: 1;
      width: 153px;
      height: 1px;
      background: #cccccc;
      top: 50%;
    }
    .card-name {
      position: relative;
      z-index: 2;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #353535;
      background-color: #f8f8f8;
      padding: 0px 10px;
    }
  }
  /*开卡礼包*/
  .open-card-gift-container {
    .gift-container-title {
      margin-left: 10px;
      margin-bottom: 21px;
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
      line-height: 16px;

      .sub-title {
        display: inline;
        font-size: 13px;
        font-weight: bold;
        color: rgba(178, 178, 178, 1);
        line-height: 16px;
      }
    }
  }
  .open-card-gift {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 10px;
    align-items: flex-start;
    padding-top: 10px;
    /* padding-bottom: 50px; */
  }

  .open-card-gift-item {
    /* margin: 0px 30rpx; */
    margin-bottom: 24px;
    position: relative;
    width: 33%;
    /* flex: 1; */

    .gift-icon {
      width: 53px;
      height: 53px;
      position: relative;
      z-index: 2;
      left: 50%;
      transform: translateX(-50%);
    }
    .circle {
      width: 46px;
      height: 46px;
      /* border: 1px solid #cccccc; */
      background-color: #ffffff;
      border-radius: 23px;
      position: absolute;
      top: -10%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }
    ._h2 {
      padding: 0 5px;
      position: relative;
      z-index: 1;
      display: inline-block;
      left: 50%;
      transform: translateX(-50%);
      min-width: 45px;
      height: 18px;
      background: rgba(252, 177, 66, 1);
      border-radius: 9px;
      font-size: 10px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      text-align: center;
      line-height: 18px;
    }

    ._h3 {
      text-align: center;
      /* width: 130px; */
      margin-top: 10px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      line-height: 16px;
    }
  }
  .openCardBtn {
    width: 200px;
    height: 44px;
    background: #03c1b6;
    border-radius: 22px;
    margin: 0 auto;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
